import React from 'react'
import { useNavigate } from 'react-router-dom'

const ProjectCard = props => {
  const navigate = useNavigate()

  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  let divStyle = {
    position: 'relative',
    width: '77vw',
    height: '20vw',
    color: 'white',
    padding: '24px',
    borderRadius: '16px',
    margin: '12px auto',
    background: `rgb(${getRandom(80, 150)}, ${getRandom(80, 155)}, ${getRandom(
      100,
      200
    )})`,
  }

  return (
    <>
      <div
        style={divStyle}
        onClick={() => {
          navigate('/appointmenttime', { state: { props } })
        }}
      >
        <h2
          style={{
            fontWeight: 700,
            paddingBottom: '6px',
            color: 'white',
          }}
        >
          {props.title}
        </h2>
        <p
          style={{
            color: '#ccc',
          }}
        >
          {props.introduce}
        </p>
        <div
          style={{
            position: 'absolute',
            right: '32px',
            bottom: '18px',
            color: '#ccc',
          }}
        >
          <i
            style={{
              marginRight: '6px',
            }}
            className="iconfont icon-naozhong"
          />
          <span>24小时可预约</span>
        </div>
        <img
          style={{
            position: 'absolute',
            right: '32px',
            bottom: '50px',
            width: '40px',
            height: '40px',
            borderRadius: '50%',
          }}
          src={props.imgUrl}
          alt=""
        />
      </div>
    </>
  )
}

export default ProjectCard
